<template>
  <div class="app-container">
    <!--主界面区域-->
    <div>
      <el-row :gutter="0">
        <el-col :span="12">
          <el-card class="box-card">
            <el-form :model="form" label-width="60px" ref="form">
              <!--专题基础信息-->
              <el-row :gutter="0">
                <el-col :span="11">
                  <el-form-item prop="subjectName" label="专题">
                    <el-input placeholder="请输入专题名称" v-model="form.subjectName" class="filter-item" auto-complete="off"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="subjectStatus" label="状态">
                    <el-switch
                      v-model="form.subjectStatus"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="启用"
                      inactive-text="禁用"
                      :active-value="1"
                      :inactive-value="0">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" @click="handleOpenSavePage">新增栏目</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="24">
                  <el-form-item prop="subjectInfo" label="简介">
                    <el-input placeholder="请输入专题简介" v-model="form.subjectInfo" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-form-item prop="subjectShowImage" label="预览">
                    <el-upload
                      class="avatar-uploader"
                      action="/api/cms/common/uploadFile"
                      :show-file-list="false"
                      :on-success="handleShowImageUploadSuccess">
                      <img v-if="form.subjectShowImage" :src="form.subjectShowImage" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="subjectImage" label="分享">
                    <el-upload
                      class="avatar-uploader"
                      action="/api/cms/common/uploadFile"
                      :show-file-list="false"
                      :on-success="handleImageUploadSuccess">
                      <img v-if="form.subjectImage" :src="form.subjectImage" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <!--专题栏目内容信息-->
              <div style="border-top: 1px solid black" v-for="item in form.columnList" :key="item.columnId">
                <div style="margin-top: 30px">
                  <el-row :gutter="0">
                    <el-col :span="6">
                      <el-form-item prop="columnName" label="栏目">
                        <el-input placeholder="请输入栏目名称" v-model="item.columnName" class="filter-item" auto-complete="off"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item prop="columnIndex" label="顺序">
                        <el-input placeholder="请输入展示顺序" v-model="item.columnShowIndex" class="filter-item" auto-complete="off"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item prop="columnStatus" label="状态">
                        <el-switch
                          v-model="item.columnStatus"
                          active-color="#13ce66"
                          inactive-color="#ff4949"
                          active-text="启用"
                          inactive-text="禁用"
                          :active-value="1"
                          :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :span="3">
                    <el-button type="primary" @click="handleOpenSaveDataPage(item.columnId,item.columnName,item.columnStatus,item.columnIndex)">新增</el-button>
                    </el-col>
                    <el-col :span="3">
                    <el-button type="danger" @click="handleDeleteColumnButtonClick(item.columnId)">删除</el-button>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0">
                    <el-col :span="24" v-for="data in item.columnDataList" :key="data.dataId">
                      <el-col :span="9">
                        <el-form-item prop="dataShowIndex" label="内容">
                          <span>{{data.dataTile}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="dataShowIndex" label="顺序">
                          <el-input placeholder="请输入展示顺序" v-model="data.dataShowIndex" class="filter-item" auto-complete="off"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="7">
                        <el-form-item prop="dataStatus" label="状态">
                          <el-switch
                            v-model="data.dataStatus"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="启用"
                            inactive-text="禁用"
                            :active-value="1"
                            :inactive-value="0">
                          </el-switch>
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                      <el-button type="danger" @click="handleDeleteDataButtonClick(data.columnId,data.dataId)">删除</el-button>
                      </el-col>
                    </el-col>
                  </el-row>
                </div>

              </div>
              <div style="margin-top: 20px">
                <el-button type="primary" @click.native.prevent="handleUpdateButtonClick">更新数据</el-button>
              </div>
            </el-form>
          </el-card>
        </el-col>
        <!--预览区域-->
        <el-col :span="12">
          <el-card class="box-card">
            <el-row :gutter="20">
              <!--标题-->
              <el-col :span="24">
                <div>
                  <h3>{{responseData.subjectInfo.subjectName}}</h3>
                </div>
              </el-col>
              <!--简介-->
              <el-col :span="24">
                <div>
                  <h5>{{responseData.subjectInfo.subjectInfo}}</h5>
                </div>
              </el-col>
              <!--预览图-->
              <el-col :span="24">
                <div>
                  <img :src="responseData.subjectInfo.subjectShowImage"/>
                </div>
              </el-col>
              <!--内容列表-->
              <el-col :span="24">
                <el-row :gutter="0">
                  <el-col :span="24" v-for="columnInformation in responseData.subjectInfo.columnDataList" :key="columnInformation.columnId">
                    <el-col :span="24"><h3 style="float: left">{{columnInformation.columnName}}</h3></el-col>
                    <el-col :span="24" v-for="data in columnInformation.dataList" :key="data.articleId">
                      <div>
                        <el-row :gutter="0">
                          <el-col :span="20"><h5 style="float: left">{{data.articleTitle}}</h5></el-col>
                        </el-row>
                        <el-row :gutter="0">
                          <el-col :span="6"><h6>{{data.articleColumn}}</h6></el-col>
                          <el-col :span="6"><h6>{{data.articleCreateTime}}</h6></el-col>
                          <el-col :span="6"><h6>{{data.articleVideoPlayCount}}</h6></el-col>
                          <el-col :span="6"><h6>{{data.articleVideoPlayTime}}</h6></el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--栏目新增隐藏域-->
    <div style="margin-top: 20px">
      <el-dialog :title="pageData.saveColumnPanelTitle" :visible.sync="pageData.saveColumnPanelStatus" size="tiny" width="720px" :before-close="handleCloseSavePage">
        <el-card class="box-card">
          <el-form :model="formColumn" label-width="100px" ref="formColumn">
            <div class="text item">
              <el-form-item prop="columnName" label="栏目名称">
                <el-input placeholder="请输入栏目名称" v-model="formColumn.columnName" class="filter-item" auto-complete="off"/>
              </el-form-item>
              <el-form-item prop="columnStatus" label="可用状态">
                <el-radio v-model="formColumn.columnStatus" :label="0">不可用</el-radio>
                <el-radio v-model="formColumn.columnStatus" :label="1">可用</el-radio>
              </el-form-item>
              <el-form-item prop="columnShowIndex" label="展示顺序">
                <el-input placeholder="请输入展示顺序" v-model="formColumn.columnShowIndex" class="filter-item" auto-complete="off"/>
              </el-form-item>
              <el-form-item prop="columnData" label="内容列表">
                <el-select v-model="formColumn.selection" multiple filterable remote reserve-keyword placeholder="请输入关键词"
                           :remote-method="handleRemoteData">
                  <el-option v-for="item in responseData.remoteSearchList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-input placeholder="请输入专题内容ID值,多个内容请使用英文逗号分隔" v-model="formColumn.columnData" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
              </el-form-item>
              <div style="margin-top: 20px">
                <el-button type="primary" @click.native.prevent="handleSaveButtonClick">增加栏目</el-button>
              </div>
            </div>
          </el-form>
        </el-card>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsSubjectGroupData,loadCmsSubjectGroupDataInfoData,loadCmsDataList,saveCmsSubjectColumn,deleteCmsSubjectColumn,
    deleteCmsSubjectData,updateCmsSubjectGroup } from "@/api/content";
  export default {
    name: "edit",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          saveColumnPanelTitle: "新增栏目",
          saveColumnPanelStatus: false
        },// 页面配置数据
        form:{
          subjectId: "",
          subjectName: "",
          subjectImage: "",
          subjectShowImage: "",
          subjectInfo: "",
          subjectStatus: 0,
          subjectHomeImage: "",
          column: [{
            columnName: "",
            columnStatus: 0,
            columnShowIndex: 0,
            dataId: ""
          }]
        },// 页面表单
        formColumn: {
          subjectId: "",
          columnId: "",
          columnName: "",
          columnStatus: 0,
          columnShowIndex: 0,
          columnData: "",
          selection: []
        },// 栏目新增面板表单
        formRules: {},// 表单验证
        responseData: {
          subjectInfo:{},// 预览数据
          remoteSearchList: [],// 远程搜索列表
        },// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      // 栏目新增面板筛选项
      "formColumn.selection":{
        handler(val, oldVal){
          this.formColumn.columnData = val.toString();
        },
        deep:true
      },
    },
    //方法集合
    methods:{
      // 事件函数
      handlePageInit(){
        this.loadCmsSubjectGroupData();
        this.loadCmsSubjectGroupDataInfoData();
      },// 初始化页面
      handleShowImageUploadSuccess(response){
        this.form.subjectShowImage = response.data;
      },// 展示如上传成功
      handleImageUploadSuccess(response){
        this.form.subjectImage = response.data;
      },// 分享图上传成功
      handleOpenSavePage(){
        this.pageData.saveColumnPanelTitle = "新增栏目";
        this.pageData.saveColumnPanelStatus = true;
        this.formColumn.subjectId = this.form.subjectId;
      },// 打开栏目新增面面板
      handleCloseSavePage(){
        this.$confirm("确认关闭？").then(response => {
          // 清空表单
          this.formColumn.subjectId = "";
          this.formColumn.columnId = "";
          this.formColumn.columnName = "";
          this.formColumn.columnStatus = 0;
          this.formColumn.columnShowIndex = 0;
          this.formColumn.columnData = "";
          this.formColumn.selection = [];
          // 关闭面板
          this.pageData.saveColumnPanelStatus = false;
        }).catch(err => {
          console.log(err);
        });
      },// 关闭栏目新增面面板
      handleRemoteData(query){
        if (query !== ""){
          let param = {
            searchTitle: query,
            searchType: 1
          };
          this.loadCmsDataList(param);
        }
      },// 远程搜索内容
      handleSaveButtonClick(){
        if (PermissionsToDetectFormUser(getPermission(), "450003")){
          this.saveCmsSubjectColumn();
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 新增栏目按钮
      handleOpenSaveDataPage(columnId,columnName,columnStatus,columnIndex){
        this.pageData.saveColumnPanelTitle = "新增内容";
        this.pageData.saveColumnPanelStatus = true;
        this.formColumn.subjectId = this.form.subjectId;
        this.formColumn.columnId = columnId;
        this.formColumn.columnName = columnName;
        this.formColumn.columnStatus = columnStatus;
        this.formColumn.columnIndex = columnIndex;
      },// 打开内容新增面板
      handleDeleteColumnButtonClick(columnId){
        if (PermissionsToDetectFormUser(getPermission(), "450003")){
          this.$confirm('是否删除该栏目及相关的内容数据, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let prams = {columnId: columnId};
            this.deleteCmsSubjectColumn(prams);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 删除栏目数据
      handleDeleteDataButtonClick(columnId,dataId){
        if (PermissionsToDetectFormUser(getPermission(), "450003")){
          this.$confirm('是否删除该栏目中的此项内容, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let prams = {
              columnId: columnId,
              dataId: dataId
            };
            this.deleteCmsSubjectData(prams);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 删除内容数据
      handleUpdateButtonClick(){
        // 判断该用户是否有更改发布状态的权限
        if (PermissionsToDetectFormUser(getPermission(), "450003")){
          this.$confirm('此操作将保存当前数据, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.updateCmsSubjectGroup();
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 大表单保存按钮
      // 接口
      loadCmsSubjectGroupData(){
        loadCmsSubjectGroupData(this.form).then(response => {
          if (response.code === "200"){
            this.form = response.data;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 获取专题修改页数据
      loadCmsSubjectGroupDataInfoData(){
        loadCmsSubjectGroupDataInfoData(this.form).then(response => {
          if (response.code === "200"){
            this.responseData.subjectInfo = response.data;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 获取预览数据
      loadCmsDataList(param){
        loadCmsDataList(param).then(response => {
          if (response.code === "200"){
            this.responseData.remoteSearchList = response.data;
          } else {
            this.$message.warning(response.message);
          }
        }).catch( error =>{
          console.log(error);
          this.$message.error(error);
        })
      },// 搜索可选内容
      saveCmsSubjectColumn(){
        saveCmsSubjectColumn(this.formColumn).then(response => {
          if (response.code === '200'){
            this.$message.success("保存成功");
            // 清空表单
            this.formColumn.subjectId = "";
            this.formColumn.columnId = "";
            this.formColumn.columnName = "";
            this.formColumn.columnStatus = 0;
            this.formColumn.columnShowIndex = 0;
            this.formColumn.columnData = "";
            this.formColumn.selection = [];
            // 关闭面板
            this.pageData.saveColumnPanelStatus = false;
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 保存栏目数据
      deleteCmsSubjectColumn(param){
        deleteCmsSubjectColumn(param).then(response => {
          if (response.code === '200'){
            this.$message.success("删除成功");
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 删除栏目
      deleteCmsSubjectData(param){
        deleteCmsSubjectData(param).then(response => {
          if (response.code === '200'){
            this.$message.success("删除成功");
            this.handlePageInit();
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error => {
          console.log(error);
          this.$message.error(error);
        })
      },// 删除内容
      updateCmsSubjectGroup(){
        updateCmsSubjectGroup(this.form).then(response => {
          if (response.code === "200"){
            this.$message.success("保存成功");
            this.$jump.push({path: "/content/subject"});
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 更新专题数据
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      _this.form.subjectId = _this.$route.query.subjectId;
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
